<template>
  <div class="main">
    <h1>计算机学院资料管理系统</h1>
    <form @submit.prevent="handleSubmit">
      <div>
        <label for="username">账号：</label>
        <input
          type="text"
          id="username"
          v-model="username"
          placeholder="请输入账号"
        />
      </div>
      <div>
        <label for="password">密码：</label>
        <input
          type="password"
          id="password"
          v-model="password"
          placeholder="请输入密码"
        />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>
  
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

// 使用 ref 创建响应式变量
const username = ref("");
const password = ref("");

// 获取路由实例
const router = useRouter();

// 处理表单提交的方法
const handleSubmit = () => {
  console.log("提交的账号：", username.value);
  console.log("提交的密码：", password.value);
  // 这里可以添加实际的登录验证逻辑，验证通过后进行路由跳转
  router.push({ name: "fileh" });
};
</script>
  
<style scoped>
.main {
text-align: center;
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}    
div {
  margin-bottom: 30px;
}
label {
  display: inline-block;
  width: 80px;
}

input {
  width: 200px;
  padding: 5px;
}

button {
  padding: 5px 10px;
}
</style>